import React from 'react';
import ReactDOM from 'react-dom/client';
import './styles/index.scss';
import reportWebVitals from './reportWebVitals';
import App from './components/App/App';
import Button from './components/Button';
import Alert from './components/Alert';
import Menu from './components/Menu/menu';
import MenuItem from './components/Menu/menuItem';
import SubMenu from './components/Menu/subMenu';
import Tabs from './components/Tabs/tabs';
import TabItem from './components/Tabs/tabItem';
import Test from './components/Test';

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  // <React.StrictMode>
  <div>
    {/* <App headerText='this is title' extraText={'this is extra'} list={[1, 2, 3]} /> */}
    <Test></Test>
    <Button className='jjj'>sfsd</Button>
    <Button btnType="danger" size="large" disable>sfsd</Button>
    <Button btnType="link" size="small">sfsd</Button>
    <Alert title='快乐' content='这里是内容啊啊' type='danger' className='myclass' afterClose={() => {console.log(12)}}></Alert>
    <Menu mode={'vertical'} style={{width: '50%'}} defaultIndex={'0'} defaultOpenSubMenus={['3']}>
      <MenuItem>link11</MenuItem>
      <MenuItem disable>lin k22</MenuItem>
      <MenuItem>defaultItem</MenuItem>
      <li></li>
      <SubMenu title='sf'>
        <MenuItem>link11</MenuItem>
        <MenuItem disable>lin k22</MenuItem>
        <MenuItem>defaultItem</MenuItem>
      </SubMenu>
    </Menu>
    <Tabs defaultIndex={0} onSelect={() => console.log(12)} type={'line'}>
      <TabItem label={'card1'}>{'this is content one'}</TabItem>
      <TabItem label={'card2'}>{'this is content tweo'}</TabItem>
      <TabItem label={'card3'} disabled>{'this is disabled card'}</TabItem>
    </Tabs>
  </div>
  // {/* </React.StrictMode> */}
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
